<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title>个人设置</title>
		<link rel="stylesheet" href="../css/frozen.css">
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<style type="text/css">
			.ui-form-item label:not(.ui-switch):not(.ui-checkbox):not(.ui-checkbox-s):not(.ui-radio) {
				width: 115px;
			}			
			.ui-form-item > .ui-select {
				margin-left: 115px;
			}
		</style>
	</head>
	<body ontouchstart>
		
		<section class="ui-container">
			<section id="tab">
				<div class="demo-item">
					<div class="demo-block">
						<div class="ui-tab">
							<ul class="ui-tab-nav ui-border-b">
								<li class="current">个人信息</li>
								<li>修改密码</li>
								<li>更换手机号</li>
							</ul>
							<ul class="ui-tab-content" style="width:300%">
								<li>
									 <div class="ui-form-item ui-form-item-show ui-border-b" style="border-top: 1px solid #E2E2E2;">
            <label for="#" class="text14">用户名</label>
            <input class="text14" type="text" value="一笔画圆">
        </div>
        <div class="ui-form-item ui-form-item-show ui-border-b">
            <label class="text14" for="#">姓名</label>
            <input class="text14" type="text" value="蒋雯">
        </div>
        <div class="ui-form-item ui-form-item-show ui-border-b">
            <label class="text14" for="#">身份证号</label>
            <input class="text14" type="text" value="3709231988******22">
        </div>
       
          <div class="ui-form-item ui-form-item-show ui-border-b">
            <label class="text14" for="#">手机号码</label>
            <input class="text14" type="text" value="188-8888-8886">
        </div>
      
								</li>
								<li>
									<div class="ui-form-item ui-form-item-pure ui-border-b">
												<input type="password" placeholder="新密码">
											
											</div>
		<div class="ui-form-item ui-form-item-pure ui-border-b">
												<input type="password" placeholder="确认密码">
											
											</div>
											<div class="ui-form-item ui-form-item-r ui-border-b">
												<input type="text" placeholder="手机号码">
												<!-- 若按钮不可点击则添加 disabled 类 -->
												<button type="button" class="ui-border-l">获取验证码</button>
										
											</div>
												<div class="ui-form-item ui-form-item-pure ui-border-tb martop10">
												<input type="text" placeholder="验证码">
											
											</div>
											<div class="ui-btn-wrap">
			<button class="ui-btn-lg ui-btn-primary">
				保存修改
			</button>
		</div>
</li>
								<li>
									<div class="ui-form-item ui-form-item-pure ui-border-b">
												<input type="text" placeholder="旧手机号码">
											
											</div>
											<div class="ui-form-item ui-form-item-r ui-border-b">
												<input type="text" placeholder="新手机号码">
												<!-- 若按钮不可点击则添加 disabled 类 -->
												<button type="button" class="ui-border-l">获取验证码</button>
										
											</div>
												<div class="ui-form-item ui-form-item-pure ui-border-tb martop10">
												<input type="text" placeholder="验证码">
											
											</div>
											<div class="ui-btn-wrap">
			<button class="ui-btn-lg ui-btn-primary">
				保存修改
			</button>
		</div>
</li>

							</ul>
						</div>
					</div>
					<script class="demo-script">
					</script>
				</div>
			</section>
		</section>
		
		<script src="../lib/zepto.min.js"></script>
		<script src="../js/frozen.js"></script>
		<script>
			(function() {
				var tab = new fz.Scroll('.ui-tab', {
					role: 'tab',
					autoplay: false,
					interval: 3000
				});
				/* 滑动开始前 */
				tab.on('beforeScrollStart', function(fromIndex, toIndex) {
					console.log(fromIndex, toIndex); // from 为当前页，to 为下一页
				})
			})();
		</script>
	</body>

</html>